html, body { height: 100%; }
body {
  background: #152240;
  background: linear-gradient(to bottom, #1e4294, #152240);

  overflow: hidden;
}

.ocean { 
  height: 10%;
  width:100%;
  position:absolute;
  bottom:0;
  left:0;
  /* background: #ffffff; */
}
.waves {
    position: relative;
    top: -26vh;
    width: 100%;
    height: 36vh;
    
    animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
    transform: translate3d(0, 0, 0);
}
  
  


  .parallax > use {
    animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
  }
  .parallax > use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
  }
  .parallax > use:nth-child(2) {
    animation-delay: -4s;
    animation-duration: 15s;
  }
  .parallax > use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
  }
  .parallax > use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
    
  }
  @keyframes move-forever {
    0% {
     transform: translate3d(-90px,0,0);
    }
    100% { 
      transform: translate3d(85px,0,0);
    }
  }
  /*Shrinking for mobile*/